<template>
  <div class="scontent">
    <div class="search-history">
      <h3>搜索历史</h3>
      <div>
        <img src="@/assets/images/icons/delete.png" @click="deleteSearch">
      </div>
    </div>
    <ul>
      <li v-for="(item,index) in searchArr" :key="index" @click="itemClick(item)">
        {{item}}
      </li>
    </ul>
  </div>
</template>

<script>
import { MessageBox } from 'mint-ui';
export default {
  name: "SContent",
  data(){
    return{
      searchArr:[],
    }
  },
  created() {
    this.searchArr = JSON.parse(localStorage.getItem('searchList'))
  },
  methods:{
    deleteSearch(){
      MessageBox({
        title: '',
        message: '是否删除全部搜索记录?',
        showCancelButton: true
      }).then(() => {
        localStorage.removeItem('searchList')
        this.searchArr = []
      })
    },
    itemClick(item){
      //增加数据
      this.searchArr.unshift(item)

      //ES6去重，这里是对象，还需转化为数组
      let obj = new Set(this.searchArr)

      //给本地存储赋值
      localStorage.setItem('searchList',JSON.stringify(Array.from(obj)))
      //跳转页面
      this.$router.push({
        path:'/search-list',
        query:{
          key: item
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.search-history{
  display: flex;
  justify-content: space-between;
  img{
    width: 24px;
    height: 24px;
  }
}
ul{
  display: flex;
  flex-wrap: wrap;
  li{
    margin:16px;
    background-color: #F7F7F7;
    border-radius: 16px;
  }
}
</style>